<template>
  <div class="app-container">
    <el-card>
      <el-row justify="space-between" class="mb10">
        <span style="font-size: 18px">库存管理</span>
        <el-button type="primary" icon="Plus" @click="handleAdd">新增库存</el-button>
      </el-row>

      <el-table :data="stockList" border stripe>
        <el-table-column prop="name" label="品称" />
        <el-table-column prop="position" label="垛位号" />
        <el-table-column prop="spec" label="规格" />
        <el-table-column prop="status" label="库存状态">
          <template #default="{ row }">
            <el-tag :type="row.status === '正常' ? 'success' : 'danger'">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="数量 (吨)" />
        <el-table-column label="操作" width="160">
          <template #default="{ row }">
            <el-button link type="primary" @click="editRow(row)">编辑</el-button>
            <el-button link type="danger" @click="deleteRow(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="formData.id ? '编辑库存' : '新增库存'" width="500px">
      <el-form :model="formData" label-width="100px">
        <el-form-item label="品称">
          <el-input v-model="formData.name" placeholder="如：高粱" />
        </el-form-item>
        <el-form-item label="垛位号">
          <el-input v-model="formData.position" placeholder="如：1号" />
        </el-form-item>
        <el-form-item label="规格">
          <el-select v-model="formData.spec" placeholder="选择规格">
            <el-option label="散" value="散" />
            <el-option label="袋装" value="袋装" />
          </el-select>
        </el-form-item>
        <el-form-item label="库存状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="正常" />
            <el-radio label="异常" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数量 (吨)">
          <el-input-number v-model="formData.weight" :min="0" :precision="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const stockList = ref([
  { id: 1, name: '高粱', position: '1号', spec: '散', status: '正常', weight: 500 },
  { id: 2, name: '玉米', position: '2号', spec: '袋装', status: '异常', weight: 320 }
])

const dialogVisible = ref(false)
const formData = reactive({
  id: null,
  name: '',
  position: '',
  spec: '',
  status: '正常',
  weight: 0
})

function handleAdd() {
  Object.assign(formData, {
    id: null,
    name: '',
    position: '',
    spec: '',
    status: '正常',
    weight: 0
  })
  dialogVisible.value = true
}

function editRow(row) {
  Object.assign(formData, { ...row })
  dialogVisible.value = true
}

function deleteRow(row) {
  ElMessageBox.confirm(`确认删除【${row.name} - ${row.position}】的库存记录？`, '删除确认', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    stockList.value = stockList.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  })
}

function submitForm() {
  if (!formData.name || !formData.position) {
    ElMessage.warning('请填写完整信息')
    return
  }

  if (formData.id) {
    const idx = stockList.value.findIndex(i => i.id === formData.id)
    if (idx !== -1) stockList.value[idx] = { ...formData }
  } else {
    formData.id = Date.now()
    stockList.value.push({ ...formData })
  }

  dialogVisible.value = false
}
</script>

<style scoped>
.mb10 {
  margin-bottom: 10px;
}
</style>
